<!--
 * @Description: 
 * @Author: wuwl
 * @Date: 2024-05-16 14:37:24
 * @FilePath: \vue-pdf2\src\views\pdfPro\index.vue
 * @LastEditTime: 2024-05-17 10:47:55
 * @LastEditors: wuwl
-->
<template>
  <div class="pdf_js_container">
    <el-button type="primary" @click="getPdf">获取pdf</el-button>
    <el-button type="primary" @click="getPdf2">获取pdf2</el-button>
    <div class="long_content_list" id="element-to-print">
      <EleTable class="pdf-group"></EleTable>
      <ImageComponent></ImageComponent>
      <ChartComponent></ChartComponent>
      <RichText></RichText>
      <pdfWord></pdfWord>
    </div>
  </div>
</template>

<script>
import TableComponent from "../../components/tableComponent.vue";
import ImageComponent from "../../components/ImageComponent.vue";
import RichText from "../../components/richText.vue";
import EleTable from "../../components/table.vue";
import ChartComponent from "../../components/echartComponent.vue";
import pdfWord from "../../components/pdfWord.vue";

import { createPDF } from "@/utils/pdfPro/indexPro.js";
export default {
  name: "PagedJs",

  components: {
    TableComponent,
    TableComponent,
    ImageComponent,
    RichText,
    pdfWord,
    EleTable,
    ChartComponent,
  },

  mounted() {},

  methods: {
    getPdf() {
      // 导出 内容区域宽度默认550
      createPDF(document.getElementById("element-to-print")).toPdf(
        "这是文件名.pdf"
      );
    },

    getPdf2() {
      createPDF(document.getElementById("element-to-print"))
        .forcePageTotal(true)
        .margin({ left: 40, top: 40, bottom: 20 })
        // .footer(document.getElementById("footer"), { skipPage: 1 })
        // .header(document.getElementById("header"), { skipPage: 1 })
        // .setClassControlFilter("isLeafWithoutDeepFilter", (v) =>
        //   ["el-table__row", "ant-table-row"].includes(v)
        // )
        .onProgress((page, total) => {
          console.log("progress", page, total);
        })
        .render()
        .then((r) => r.getPDF().save("save.pdf"));
    },
  },
};
</script>

<style lang="less">
.long_content_list {
  width: 1200px;
  margin: 0 auto;
}
</style>
